iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
Mobile Development

Android Kotlin開發 -小嫩雞的30篇精選筆記系列 第 2

Android x Kotlin : RecyclerView(一)-嬰兒式基本用法速覽

  • 分享至 

  • xImage
  •  

recyclerview | Android Develop官網

簡介

recyclerview顧名思義是一種可以重複利用的view,用於顯示清單列表,是個很基本、用途也很廣的元件,基本上幾乎每個app都會用到。

重複利用是三小?原理是啥?

recyclerview的回收機制的原理如下,系統只會產生一定數量的view,當使用者往下捲動,螢幕上方被移動到畫面外的view就會被回收,把內容換成新的資料,並從螢幕下方塞回來,這機制的好處可以大幅提升app效能。

製作Recyclerview


建立dataModel來定義資料格式,item_ex來做出每個項目的模板,然後接入adapter。可以把資料想像成客人,dataModel想像成餐廳設定的客群對象,Item_ex是座位,adapter是負責帶位的服務生,到時候負責把客人綁定到預定好的座位上。而mainActivity本身餐廳,在這裡傳入資料(接待客人)及連接adapter(雇用服務生)。

實作開始

  1. 先加入recyclerview的implementation
dependencies {
    implementation "androidx.recyclerview:recyclerview:1.1.0"
    // For control over item selection of both touch and mouse driven selection
    implementation "androidx.recyclerview:recyclerview-selection:1.1.0-rc02"
}
  1. 建立一個dataModel.kt,格式是包含有一個字串跟一個整數,建立一個list並在下面生成資料並加入到list裡面。
data class Item(val name:String,
                val img:Int)
                
val myItemList = arrayListOf<Item>()

//生成資料
for(i in 0..5){
    myItemList.add(Item("Wang",R.drawable.your_img))
}
  1. 建立一個layout檔,item_example.xml,可能包含幾個imageView或TextView看你想放什麼元件。
        <ImageView
            android:id="@+id/imgv"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:src="@drawable/xxxxxxx"
            />

        <TextView
            android:id="@+id/tv_name"
            android:layout_width="0dp"
            android:layout_height="30dp"
            android:text="xxxxxxx" />
  1. 建立一個adapter介面卡,MyAdapter.kt,在這裡綁定recyclerview與要顯示的data資料。
    剛說過adapter是負責帶位的服務生,負責把客人(也就是資料)綁定到他的座位上(item_ex中每個元件的位置)。
    第一件事是先宣告一個當地的list,到時候放資料用的,
    然後宣告一個內部類別mViewHolder,可以看到我們在這裡把剛剛item_ex上的元件拉進來,並寫一個方法來綁定每個資料與對應的元件。
    接下來在onCreateViewholder 導入item_ex項目模板進來,並在最後回傳綁定了項目模板的mViewHolder。
    getItemCount就是他需要知道總共有幾個項目。list奪大就表示有多少項目,所以我們回傳剛剛宣告的list長度給他
    onBindViewHolder顧名思義我們要在這裡綁定資料,所以我們呼叫剛剛寫好的bind方法來完成綁定。
class MyAdapter:RecyclerView.Adapter<MyAdapter.mViewHolder>() {

    var unAssignList = listOf<Item>()

    inner class mViewHolder(itemView:View):RecyclerView.ViewHolder(itemView){
            
            //把layout檔的元件們拉進來,指派給當地變數
            val icon = itemView.imgv
            val name = itemView.tv_name
            
            fun bind(item: Item){
                //綁定當地變數與dataModel中的每個值
                icon.setImageResource(item.img)    
                name01.text = item.name
                
            }
    }

    override fun onCreateViewHolder(parent:ViewGroup,viewType: Int):mViewHolder {

        //載入項目模板   
        val inflater = LayoutInflater.from(parent.context)
        val example = inflater.inflate(R.layout.item_example, parent, false)
        return mViewHolder(example)

        }

    override fun getItemCount() = unAssignList.size
    
    override fun onBindViewHolder(holder: mViewHolder, position: Int) {
        
        //呼叫上面的bind方法來綁定資料
        holder.bind(unAssignList[position])
                
    }

    //更新資料用
    fun updateList(list:ArrayList<Movement>){
        unAssignList = list
    }
}
  1. 去 activity_main.xml ,放一個recyclerview元件。
<androidx.recyclerview.widget.RecyclerView

        android:id="@+id/r_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

</androidx.recyclerview.widget.RecyclerView>
  1. 回到 MainActivity.kt 做最後設定。
    我們先將adapter實例化,在onCreate裡面我們先傳入資料,myItemList就是我們剛剛生成資料的那個list,我們現在傳給adapter。
    最後設定一下layoutManager,並把recyclerview綁上adapter就完成啦。
class MainActivity : AppCompatActivity() {

    val mAdapter = MyAdapter()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        mAdapter.updateList(myItemList)     //傳入資料
        r_view.layoutManager = LinearLayoutManager(this)
        r_view.adapter = mAdapter
        
    }

完成啦,舒服。


上一篇
開賽第一天,開始懂了
下一篇
Android x Kotlin : RecyclerView(二)-項目的拖曳換位及左右滑動刪除
系列文
Android Kotlin開發 -小嫩雞的30篇精選筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言